<template>
  <div class="container">
    <el-card shadow="never" v-loading="loading">
      <div class="title">{{info.lecturerName}}
        <el-button type="primary" text @click="proxy.$utils.copy(info._id)">(ID：{{info._id}})</el-button>
      </div>

      <div class="rows flex alignCenter">
        <div class="rows-item flex shrink" ref="firstCol">授课项目：<courseQuery v-model="info.teachingProgramId" readonly="1"></courseQuery>
        </div>
        <div class="flex alignCenter width100">
          <div class="rows-item flex box">课时：{{info.classHour}}</div>
          <div class="rows-item flex box">联系电话：{{info.teacher_info&&info.teacher_info.mobile}}</div>
        </div>
      </div>

      <div class="rows flex alignCenter">
        <div class="rows-item flex shrink" :style="firstStyle">证件号码：{{info.idCard}}</div>
        <div class="flex alignCenter width100">
          <div class="rows-item flex box">合同起止日期：{{info.contractStartTime}} ~ {{info.contractEndTime}}</div>
          <div class="rows-item flex box">授课状态：
            <div v-if="info.teachingStatus == '2'" style="color: #0F40F5;">专职</div>
            <div v-else-if="info.teachingStatus == '1'" style="color: #4196A2;">兼职</div>
            <div v-else style="color: #EA2310;">停用</div>
          </div>
        </div>
      </div>

      <div class="rows flex alignCenter">
        <div class="rows-item flex shrink" :style="firstStyle">教师资格证：{{info.teacherQualificationCertificate}}
        </div>
        <div class="flex alignCenter width100">
          <div class="rows-item flex box">带班期数：{{info.bindClassIds&&info.bindClassIds.length}}</div>
          <div class="rows-item flex box">备注：{{info.teacher_info&&info.teacher_info.remarks}}</div>
        </div>
      </div>
    </el-card>

    <el-card shadow="never">
      <div class="flex justifyBetween alignCenter">
        <el-tabs v-model="activeName" class="class-tabs">
          <el-tab-pane label="教务管理手册" name="1"></el-tab-pane>
          <el-tab-pane label="班级管理手册" name="2"></el-tab-pane>
        </el-tabs>

        <el-button type="primary" plain @click="dialogVisible = true">关联班级</el-button>
      </div>

      <academicManual v-if="activeName==1" :archivesId="info._id" :info="info"></academicManual>
      <classManual v-else :archivesId="info._id"></classManual>
    </el-card>

    <!-- 批量操作 -->
    <el-dialog v-model="dialogVisible" title="关联班级" width="700" :before-close="handleClose">
      <el-select filterable v-model="info.bindClassIds" placeholder="请选择班级名称" multiple>
        <el-option :label="item.className" :value="item._id" v-for="(item, index) in classOptions" :key="index">
          <el-row :gutter="20">
            <el-col :span="16">
              <div>{{item.className}}</div>
            </el-col>
            <el-col :span="3">
              <div v-if="item.status == 0" style="color: #E99D42">待开班</div>
              <div v-else-if="item.status == 1" style="color: #54C076">开班</div>
              <div v-else>结业</div>
            </el-col>
            <el-col :span="3">
              <div>{{item.classStudentsNum}}/{{item.classNum}}</div>
            </el-col>
          </el-row>
        </el-option>
      </el-select>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit" :loading="loading">
            确 认
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import academicManual from "@/views/courseManage/components/academicManual.vue";
import classManual from "@/views/courseManage/components/classManual.vue";
const { proxy } = getCurrentInstance();
import { useRoute } from "vue-router";
const route = useRoute();

let activeName = ref("1");
let classOptions = ref([]);
let dialogVisible = ref(false);
let info = ref({});
let firstColWidth = ref(0);
let loading = ref(false);

let archivesId = computed(() => {
  return route.query.id;
});

let firstStyle = computed(() => {
  return { width: `${firstColWidth.value}px` };
});

let colStyle = computed(() => {
  if (firstColWidth.value) {
    return {
      width: `calc((100% - ${firstColWidth.value}px - 100px)/2)`,
    };
  }
});

onMounted(() => {
  getInfo();
  getClass();
});

async function submit() {
  try {
    loading.value = true;
    await proxy.$apis.teachingArchives({
      type: "bindClass",
      data: { _id: info.value._id, bindClassIds: info.value.bindClassIds },
    });
    proxy.$utils.showToast("关联班级成功");
    handleClose();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}

function handleClose() {
  getInfo();
  dialogVisible.value = false;
}

function setCss() {
  nextTick(() => {
    firstColWidth.value = proxy.$refs.firstCol.offsetWidth;
  });
}

async function getClass() {
  let resp = await proxy.$apis.classData({
    type: "query",
  });
  for (let index = 0; index < resp.length; index++) {
    const element = resp[index];
    //班级人数
    let classStudentsList = await proxy.$apis.classStudent({
      type: "query",
      data: { classId: element._id },
    });
    element.classStudentsNum = classStudentsList.length;
  }
  classOptions.value = resp;
}

async function getInfo() {
  try {
    loading.value = true;
    info.value = await proxy.$apis.teachingArchives({
      type: "details",
      data: { _id: archivesId.value },
    });
    console.log("详情", info.value);
    setCss();
  } catch (error) {
  } finally {
    loading.value = false;
  }
}
</script>


<style lang="scss">
.class-tabs {
  width: 100%;
  .el-tabs__nav-wrap::after {
    background-color: transparent !important;
  }
}
</style>
<style lang="scss" scoped>
.container {
  margin: 20px;
  .title {
    color: #c95b18;
    font-weight: bold;
    font-size: 20px;
    margin-bottom: 40px;
  }

  .rows {
    .rows-item {
      font-size: 14px;
      margin-bottom: 15px;
    }
    .box {
      width: calc((100% - 100px) / 2);
      margin-left: 100px;
    }
  }

  .el-card {
    margin-bottom: 20px;
    position: relative;
    .edit-btn {
      position: absolute;
      top: 15px;
      right: 20px;
    }
  }
}
</style>

